<template>
  <div class="mod-out-home">
    <page-header></page-header>
    <div class="max_screen_body">
      <div class="max_screen_body_left">
        <div class="screen_card screen_card1">
          <card-header :title="'党建品牌'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body myDesc" style="padding: 1.5vh 0.8vw">
            <div v-if="dataArr['partyBrand']" style="width: 100%;height: 100%;">
              <el-image :src="'https://'+dataArr['partyBrand'].image"
                        style="width: 100%;height: 100%;"
                        fit="cover"
                        :preview-src-list="['https://'+dataArr['partyBrand'].image]"></el-image>
            </div>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'组织架构'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body myDesc" style="padding: 1.5vh 0.8vw">
            <div v-if="dataArr['organizationalStructure']" style="width: 100%;height: 100%;font-size: 0">
              <el-image :src="'https://'+dataArr['organizationalStructure'].image"
                        style="width: 100%;height: 100%;"
                        fit="cover"
                        :preview-src-list="['https://'+dataArr['organizationalStructure'].image]"></el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="max_screen_body_center">
        <div class="screen_card screen_card1">
          <card-header :title="'党建资讯'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body screen_card3 videoBox">
            <div class="screen_center_news_item" v-for="(item, index) in dataArr['partyBuildingInfo']" :key="item.id"
                 @click="show(item.id)">
              <div class="center_news_img">
                <img :src="'https://' + item.image" alt=""/>
              </div>
              <div class="center_news_word">
                <div class="center_news_title">{{ item.title }}</div>
                <div class="center_news_desc">{{ item.description }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'党建活动'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body screen_card4">
            <el-carousel indicator-position="none" arrow="never" :interval="6000">
              <el-carousel-item v-for="(item,index) in dataArr['partyBuildingActivities']" :key="item.id">
                <div class="imageBox">
                  <el-image style="width: 30.5vw;height: 30.5vh;" fit="cover"  :src="'https://' + item.image"
                            :preview-src-list="[...dataArr['partyBuildingActivities'].map((ite:any)=>'https://' + ite.image)]"
                            preview-teleported :initial-index="index"></el-image>
                </div>
                <div class="img_desc">{{ item.title }}</div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="max_screen_body_right">
        <div class="screen_card screen_card1">
          <card-header :title="'党建课堂'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body screen_card4">
            <el-tabs class="demo-tabs" v-model="defaultTab">
              <el-tab-pane label="视频" name="video">
                <Videos v-if="screenData" :video-url="'https://' + screenData.partyBuild" :autoplay="true" :loop="true"
                        :video-cover="'https://' + screenData.partyBuildCover" zoom="unset"/>
              </el-tab-pane>
              <el-tab-pane label="链接" name="link">
                <iframe style="width: 100%; height: 33vh" scrolling="yes" src="https://h5app.peopleapp.com/study2023"></iframe>
              </el-tab-pane>
            </el-tabs>

          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'入党流程'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body videoBox">
            <Videos v-if="screenData" :video-url="'https://' + screenData.joinParty" :autoplay="false" :loop="true"
                    :video-cover="'https://' + screenData.joinPartyCover" zoom="unset"/>
          </div>
        </div>
      </div>
    </div>
    <show-dialog ref="showDialogRef"></show-dialog>
  </div>
</template>
<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import img from "@/assets/images/screen/welcome.png";
import Videos from "@/views/home/components/videos.vue";
import {reactive, onBeforeMount, ref} from "vue";
import baseService from "@/service/baseService";
import showDialog from "./components/show_dialog.vue";

const showDialogRef = ref();
const defaultTab = "video";
let arr = ["partyBuildingInfo", "partyBuildingActivities"];
const dataArr = reactive({}) as any;
const screenData = ref();
const getDataList = () => {
  baseService.get("/clc/clcbaseinfo/page", {limit: 1, page: 1, isDefault: 1, isPublish: 1}).then((res) => {
    if (res.data.list.length > 0) {
      screenData.value = res.data.list[0];
    }
  });
  baseService
    .get("/bus/busnotice/page", {
      page: 1,
      limit: 1,
      type: "partyBrand",
      textType: 3,
      isPublish: 1,
      isTopped: 1
    })
    .then((res) => {
      dataArr["partyBrand"] = res.data.list[0];
    });
  baseService
    .get("/bus/busnotice/page", {
      page: 1,
      limit: 1,
      type: "organizationalStructure",
      textType: 3,
      isPublish: 1,
      isTopped: 1
    })
    .then((res) => {
      dataArr["organizationalStructure"] = res.data.list[0];
    });
  for (let i = 0; i < arr.length; i++) {
    baseService
      .get("/bus/busnotice/page", {
        page: 1,
        limit: 10,
        type: arr[i],
        textType: i === 1 ? 3 : "",
        isPublish: 1
      })
      .then((res) => {
        dataArr[arr[i]] = res.data.list;
      });
  }
};

const show = (id: any) => {
  // loading.value = true;
  baseService.get(`/bus/busnotice/${id}`).then((res) => {
    // loading.value = false;
    showDialogRef.value.acceptParams({text: res.data.textContent});
  });
};

onBeforeMount(() => {
  getDataList();
});
</script>
<style scoped lang="less">
.max_screen_body {
  & > div {
    flex: 1 !important;
    width: 0;
  }

  .screen_card1 {
    margin-bottom: 2.5vh;
  }

  .myDesc {
    font-size: 0;
    font-weight: 400;
    color: #ffffff;
  }

  .screen_card3 {
    padding: 2.2vh 0.8vw;
  }

  .screen_center_news_item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.9vh;
    cursor: pointer;

    .center_news_img {
      width: 5vw;
      height: 6.7vh;
      border: 0.1vw solid #1aa6f2;
      margin-right: 0.8vw;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .center_news_word {
      flex: 1;
      width: 0;
      color: #e4f2ff;

      .center_news_title {
        font-size: 0.8vw;
        margin-bottom: 1.3vh;
      }

      .center_news_desc {
        font-size: 0.6vw;
        opacity: 0.8;
        line-height: 1.5;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
      }
    }
  }

  .screen_center_news_item:last-child {
    margin-bottom: 0;
  }

  .screen_card4 {
    padding-top: 1.5vh;
    text-align: center;

    .el-carousel {
      height: 100%;

      :deep(.el-carousel__container) {
        height: 100%;
      }
    }

    .imageBox {
      //border: 0.1vw solid #1aa6f2;
      width: 30vw;
      height: 30.5vh;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .img_desc {
      font-weight: 500;
      color: #ffffff;
      font-size: 1vw;
      margin-top: 2.5vh;
    }
  }
}

.videoBox {
  font-size: 0;
}
</style>
